/*
 * @作者: loarn
 * @Date: 2021-10-24 14:04:28
 * @LastEditTime: 2021-10-27 22:44:11
 * @FilePath: \JD.com\js\slider.js
 */


// 需求：简单的轮播(图片自动轮播小圆点跟随高亮显示，鼠标移入移出轮播停止开启，点击上一张下一张，点击小圆点切换图片)
// 1. 获取要操作的元素
// 1.1 克隆复制第一张和最后一张图片的li，并放到最后和最前面
// 2. 实现自动轮播:(通过定时器显示自动轮播)
// 3. 鼠标移入移出轮播暂停和开始
// 4. 实现点击上一张下一张
// 5. 点击小圆点实现切换图片

let banner = document.querySelector('.banner')
let ul = document.querySelector('.ulis');
let bg = document.querySelectorAll('.ulis>li')
let olis = document.querySelectorAll('.olis>li')
let prve = document.querySelector('.left')
let next = document.querySelector('.right')



let onOff = true;
//克隆第一张，最后一张
function setUi() {
    let firstLi = bg[0].cloneNode(true)
    let lastLi = bg[2].cloneNode(true)

    ul.appendChild(firstLi);
    ul.insertBefore(lastLi, bg[0]);
    // 重新获取一下bg
    bg = document.querySelectorAll('.ulis>li');
    // 给ul设置宽度
    ul.style.width = bg.length * bg[0].offsetWidth + 'px';
    // 设置ul的初始left属性(显示图片1)
    ul.style.left = -bg[0].offsetWidth + 'px'
    // 重新获取ul
    ul = document.querySelector('.ulis')

   

}
setUi();

//自动滚轮

let n = 1;
let timer = setInterval(() => {
    if (!onOff) return
    onOff = false;
    n++;
    play();
}, 3000);

//鼠标移入移出
banner.onmouseenter = () => clearInterval(timer);
banner.onmouseleave = () => {
    if (!onOff) return
    onOff = false;
    n++;
    play();
    timer = setInterval(() => {
        if (!onOff) return
        onOff = false;
        n++;
        play()
    },3000)
}




//点击上下一张
prve.onclick = () => {
    if (!onOff) return
    onOff = false;
    n--;
    play();
}
next.onclick = () => {
    console.log(123)
    if (!onOff) return
    onOff = false;
    n++;
    play();
}




//点击小圆跳转
for (let i = 0; i < olis.length; i++) {
    olis[i].onclick = () => {
        if (!onOff) return
        onOff = false;
        n = i + 1;
        play();
    }
}

// 封装一个轮播图片和圆点高亮显示的函数
function play() {
    // 调用运动函数
    move(ul, {
        left: -n * bg[0].offsetWidth
    }, function () {
        // console.log(123);
        // 如果n = 3,则此时显示的应该是第一张图片li
        if (n == 6) {
            n = 1;
        }
        if (n == 0) { // 如果索引为0这上次显示的是图片1，此时需要显示图片3
            n = 5;
        }
        ul.style.left = -n * bg[0].offsetWidth + 'px';
        // 小圆点跟随高亮显示
        for (let i = 0; i < olis.length; i++) {
            olis[i].className = '';
        }
        olis[n - 1].className = 'active';
        // 运动结束则将开关打开
        onOff = true;
    })
}




// 封装运动函数
function move(ele, styleObj, fn) { // ele运动的元素，styleObj目标样式对象,fn运动结束后要执行的函数
    // 定义一个timerObj,定时器对象
    // {left:timerId1,top:timerId2}
    let timerObj = {};
    // 遍历styleObj目标样式对象
    for (let attr in styleObj) {
        // let timer;
        let curStyle;
        if (attr == 'opacity') { // 当目标样式的属性名是透明度的时候，则不要取整，而是需要放大一百倍进行运算
            curStyle = getStyle(ele, attr) * 100; // 元素的当前样式值
            styleObj[attr] = styleObj[attr] * 100
        } else {
            curStyle = parseInt(getStyle(ele, attr)); // 元素的当前样式值
        }

        timerObj[attr] = setInterval(() => {
            // 获取目标样式值和当前样式值的差的十分之一
            let goLength = (styleObj[attr] - curStyle) / 10
            // 将每次要运动差值的十分之一距离的整数
            if (goLength < 0) { // 比如：向上运动的时候差值就是负数
                goLength = Math.floor(goLength);
            } else {
                goLength = Math.ceil(goLength);
            }
            // 每过20毫秒给当前的样式值累加goLength
            curStyle += goLength;
            // 判断curStyle是否达到目标值
            if (curStyle == styleObj[attr]) { // 到达目标属性值，则关闭定时器
                clearInterval(timerObj[attr]); //关闭定时器
                // 删除定时器对象中，被关闭的定时器
                delete timerObj[attr];
                if (Object.keys(timerObj).length == 0) { // 如果对象属性名的数组为空，则对象也就是空的
                    // 运动结束了,调用fn函数
                    fn();
                }
            } else {
                if (attr == 'opacity') { // 如果是透明度的运动则，给元素赋值需要缩小一百倍，不需要单位
                    ele.style[attr] = curStyle / 100;
                } else {
                    // 累加后的值给到元素属性          
                    ele.style[attr] = curStyle + 'px';
                }
            }
        }, 20)
    }
}


// 封装一个获取元素样式值的函数
function getStyle(ele, attr) { // ele元素,attr是样式属性
    try {
        return window.getComputedStyle(ele)[attr];
    } catch (error) {
        return ele.currentStyle[attr];
    }
}




